<template>
  <!-- 导航栏部分样式有瑕疵，后期可更改 -->

  <el-container>
    <!-- 头部 -->
    <el-header>
      <Header />
    </el-header>
    <el-container>
      <!-- 导航栏 -->
      <el-aside width="210px">
        <el-menu
          :router="true"
          :default-active="currentPage"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-submenu index="/personalinformation">
            <template slot="title">
              <!-- <el-container> -->
              <i class="el-icon-s-home"></i>
              <span>个人信息</span>
              <!-- </el-container> -->
            </template>
            <el-menu-item-group>
              <!-- <el-menu-item index="1-1">个人资料</el-menu-item> -->
              <el-menu-item index="/personalinformation/personaldata">
                <router-link tag="span" to>个人资料</router-link>
              </el-menu-item>
              <el-menu-item index="/personalinformation/updatepassword">
                <router-link tag="span" to>修改密码</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/personalinformation">
            <template slot="title">
              <i class="el-icon-s-platform"></i>
              <span>职称评审</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/personalinformation/jobtitledeclare">
                <router-link tag="span" to>职称申报</router-link>
              </el-menu-item>
              <el-menu-item index="/personalinformation/declareexplanation">
                <router-link tag="span" to>申报说明</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 中间显示的地方 -->
      <el-main>
        <!-- Main -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import Header from "../../../components/Header.vue";
export default {
  components: {
    Header
  },
  data() {
    return {
      currentPage: "/personalinformation/personaldata"
    };
  },
  mounted() {
    this.currentPage = this.$router.history.current.fullPath;
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>
<style scoped lang="less">
.el-aside::-webkeit-scrollbar{display: none;}

/deep/.el-menu-item-group__title {
  padding: 0;
}
.el-header {
  padding: 0;
}
.el-container,
.el-menu {
  // height: 100%;
}
.el-menu {
  border: none;
}

.el-aside {
  height: 100%;
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  
  /* line-height: 200px; */
  // border-right: 1px solid #eee;
}

.el-main {
  width: 90%;
  border-left: 1px solid #eee;

  /* background-color: #e9eef3; */
  /* color: #333; */
  /* text-align: center; */
  /* margin-top: 20px; */
  /* line-height: 160px; */
}
/* #add_nav_css, */
/* .el-submenu__title  */
.el-submenu {
  /* text-align: center; */
  /* padding-right: 40px; */
  /* background-color: #ECF5FF; */
}
// /deep/.el-submenu__title {
//    padding-left: 0px;
// }
</style>